<template>
  <div id="subpage">

    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><b>小程序</b></el-breadcrumb-item>
        <el-breadcrumb-item to="/mini_app/e_book">活动管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/mini_app/activity_info',query:{name:smallLesson_title,id:aid}}">活动文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{Lesson_essay_id ? '修改' : '添加'}}页面</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>

    <div class="content">
      <div class="xcx-head">
        <span class="title">{{Lesson_essay_id ? '修改' : '添加'}}页面</span>
      </div>
      <div class="xcx-content">
        <el-form ref="form_data" :model="form_data" :rules="rules" label-width="140px" style="width: 80%;">
          <el-form-item label="活动标题：" prop="name">
            <el-input class="w400" v-model="form_data.name" placeholder="请输入活动标题"></el-input>
          </el-form-item>
          <el-form-item label="副标题：" prop="sub_name">
            <el-input class="w400" v-model="form_data.sub_name" placeholder="请输入副标题"></el-input>
          </el-form-item>
          <el-form-item label="底部文案：" prop="sub_title">
            <el-input class="w400" v-model="form_data.sub_title" placeholder="请输入底部文案"></el-input>
          </el-form-item>
          <el-form-item label="地区：" prop="address">
            <el-input class="w400" v-model="form_data.address" placeholder="请输入地区"></el-input>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input class="w400" v-model="form_data.sort" placeholder="请输入排序"></el-input>
          </el-form-item>
          <el-form-item label="内容：" prop="content">
            <!-- 富文本 -->
            <richText  placeholder='请输入文章内容' ref="richText2" @editor_change='editor_change2' :describe='form_data.content'></richText>
          </el-form-item>
          <el-form-item label="简介：" prop="descp">
            <!-- 富文本 -->
            <richText  placeholder='请输入文章简介' ref="richText1" @editor_change='editor_change1' :describe='form_data.descp'></richText>
          </el-form-item>
          <el-form-item prop="cate" label="分类板块：">
            <el-select clearable style="width: 400px;" v-model="form_data.cate" placeholder="请选择分类板块">
              <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动封面：" class="line_H" prop="image">
            <el-upload accept="image/*" :on-exceed="descExceed" limit="1" :on-remove='del_img' :action="upload_img_url" :file-list="form_data.image" list-type="picture-card" :on-success="img_succ" :data="postData">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="额外封面：" class="line_H" prop="first_image">
            <el-upload accept="image/*" :on-exceed="descExceed" limit="1" :on-remove='del_img3' :action="upload_img_url" :file-list="form_data.first_image" list-type="picture-card" :on-success="img_succ3" :data="postData">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="活动二维码：" class="line_H" prop="qr">
            <el-upload accept="image/*" :on-exceed="descExceed" limit="1" :on-remove='del_img2' :action="upload_img_url" :file-list="form_data.qr" list-type="picture-card" :on-success="img_succ2" :data="postData">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="上传音频:" prop="audio_url">
                        <el-upload accept="audio/*" style="width: 400px;" v-loading="loading" :before-upload="before_upload" :action="upload_img_url" :on-remove="remove_audio" :on-success="upload_video_success" :limit="1" :show-file-list="false" :on-exceed="handle_exceed_video" :data="postData" v-if="is_upload_video == false">
                            <el-button type="primary">点击上传</el-button>
                            <p style="font-size:12px; color:#909399;">音频格式mp3</p>
                        </el-upload>

                        <el-button type="primary" @click="remove_audio" v-if="is_upload_video">移除音频
                        </el-button>
                        <div style="padding-top: 10px;" v-if="is_upload_video">
                            <el-row>
                                <el-col :span="0.5">
                                    <el-popover placement="top-start" trigger="hover">
                                        <div style="text-align: center">
                                            <el-progress color="#67C23A" type="circle" :percentage="music.volume"></el-progress>
                                            <br>
                                            <el-button @click="changeVolume(-10)" icon="el-icon-minus" circle></el-button>
                                            <el-button @click="changeVolume(10)" icon="el-icon-plus" circle></el-button>
                                        </div>
                                        <el-button @click="play" id="play" slot="reference" :icon="music.isPlay?'iconfont icon-iconstop':'el-icon-caret-right'" circle></el-button>
                                    </el-popover>
                                </el-col>
                                <el-col :span="8" style="padding-left: 15px;">
                                    <el-slider @change="changeTime" :format-tooltip="formatTime" :max="music.maxTime" v-model="music.currentTime" style="width: 100%;"></el-slider>
                                </el-col>
                                <el-col :span="6" style="padding: 0px 0px 0px 10px;color:#909399;font-size: 13px">
                                    {{formatTime(music.currentTime)}}/{{formatTime(music.maxTime)}}
                                </el-col>
                            </el-row>
                            <audio ref="music" loop>
                                <source :src="form_data.audio" type="audio/mpeg">
                            </audio>
                        </div>
                    </el-form-item>
                  <el-form-item label="视频地址：" prop="video_url">
                        <el-input class="w400" v-model="form_data.video_url" placeholder="请输入视频地址"></el-input>
                    </el-form-item>
          <el-form-item class="mar_T_50">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="back">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script src="../../../static/js/mini_app/activity_info_detail.js"></script>

<style scoped>

</style>
